<template>
    <div class="page">
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <h5>账单明细</h5>
                                </el-col>
                                <el-col :span="4" :offset="10">
                                    <div class="block">
                                        <el-date-picker
                                            v-model="queryParams.date"
                                            align="right"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期"
                                            :picker-options="pickerOptions">
                                        </el-date-picker>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <el-input placeholder="请输入站点" v-model="queryParams.service_name"  class="input-with-select">
                                        <el-button slot="append" icon="el-icon-search" @click="queryList"></el-button>
                                    </el-input>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <el-row :gutter="20">
                                <el-col :span="24" :xs="24" :sm="24" :lg="24">
                                    <el-table :data="listData.data" style="width: 100%" v-loading="listLoading" @row-click="rowClick">
                                        <el-table-column
                                            prop="date"
                                            label="日期">
                                        </el-table-column>
                                        <el-table-column
                                            prop="service_name"
                                            label="站点">
                                        </el-table-column>
                                        <el-table-column
                                            prop="total_sign"
                                            label="签收件（件）">
                                        </el-table-column>
                                        <el-table-column
                                            prop="unit_price"
                                            label="单价（元）">
                                        </el-table-column>
                                        <el-table-column
                                            prop="total_income"
                                            label="合计">
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="panel-footer text-right">
                            <el-pagination @size-change="sizeChange" @current-change="currentChange"
                                           :current-page="queryParams.page"
                                           :page-sizes="[5, 10, 20, 50]"
                                           :page-size="queryParams.paginate"
                                           layout="total, sizes, prev, pager, next, jumper"
                                           :total="listData.total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="detailDialog" width="40%" :before-close="handleDetailClose">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <h3 class="whiteFont text-center">{{detailQueryParams.date}} - {{detailQueryParams.service_name}}</h3>
                </div>
                <div class="text item">
                    <el-table
                        :data="detailData.data"
                        style="width: 100%;" >
                        <el-table-column
                            prop="single_number"
                            label="快递单号"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="order_number"
                            label="订单号">
                        </el-table-column>
                        <el-table-column
                            prop="to_mobile"
                            label="收件人">
                        </el-table-column>
                        <el-table-column
                            prop="order_created_at"
                            label="入库时间">
                        </el-table-column>
                        <el-table-column
                            prop="created_at"
                            label="出库时间">
                        </el-table-column>
                    </el-table>
                </div>
                <br>
                <el-pagination
                    @size-change="SizeChangeForDetail"
                    @current-change="CurrentChangeForDetail"
                    :current-page="detailQueryParams.page"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="detailQueryParams.paginate"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="detailData.total">
                </el-pagination>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
    import api from '../apis'

    export default {
        name: "Bill",
        data(){
            return {
                //详情表格加载动画
                detailLoading:false,
                //列表加载动画
                listLoading:false,
                //列表数据
                listData:{
                    data:[],
                    total:0,
                },
                //请求参数
                queryParams:{
                    page:1,
                    paginate:10,
                    service_name:'',
                    date:'',
                },
                //详情请求参数
                detailQueryParams:{
                    service_name:'',
                    service_id:'',
                    date:'',
                    page:1,
                    paginate:10,
                },
                //详情对话框开关
                detailDialog:false,
                //详情数据
                detailData:{
                    data:[],
                    total:0,
                },
                //日期选择器快捷方式
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            };
        },
        methods:{
            /**
             * 请求列表数据
             */
            queryList(){
                this.listLoading = true;
                api.bill.list(this.queryParams).then(response=>{
                    this.listData = response.data;
                    this.listLoading = false;
                }).catch(errors=>{

                })
            },
            /**
             * 列表改变页码
             * @param page
             */
            currentChange(page){
                this.queryParams.page = page;
                this.queryList();
            },
            /**
             * 列表改变每页容量
             * @param size
             */
            sizeChange(size){
                this.queryParams.paginate = size;
                this.queryList();
            },
            /**
             * 详情改变每页容量
             */
            SizeChangeForDetail(size){
                this.detailQueryParams.paginate = size;
                this.queryDetail();
            },
            /**
             *
             */
            CurrentChangeForDetail(page){
                this.detailQueryParams.page = page;
                this.queryDetail();
            },
            /**
             * 表格行点击
             */
            rowClick(row, event, column){
                this.detailDialog = true;
                this.detailQueryParams.date = row.date;
                this.detailQueryParams.service_id = row.service_id;
                this.detailQueryParams.service_name = row.service_name;
                this.queryDetail();
            },
            /**
             * 关闭详情对话框
             */
            handleDetailClose(){
                this.detailDialog = false;
            },
            /**
             * 请求详情
             */
            queryDetail(){
                api.bill.detail(this.detailQueryParams).then(response=>{
                    this.detailData = response.data;
                }).catch(errors=>{

                })
            }
        },
        mounted(){
            this.queryList();
        }
    }
</script>

<style lang="scss" scoped>
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 100%;
    }
</style>
